import React from 'react';
import { Star } from 'lucide-react';
import { Link } from 'react-router-dom';
interface ProductCardProps {
  id: string;
  title: string;
  brand: string;
  image: string;
  rating: number;
  reviewCount: number;
  price: number;
  originalPrice?: number;
  category: string;
}
export function ProductCard({
  id,
  title,
  brand,
  image,
  rating,
  reviewCount,
  price,
  originalPrice,
  category
}: ProductCardProps) {
  return <div className="group bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
      <Link to={`/${category.toLowerCase()}/${id}`} className="block">
        <div className="relative h-64 overflow-hidden">
          <img src={image} alt={title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
          {originalPrice && <div className="absolute top-3 left-3 bg-[#c89b9b] text-white text-xs font-medium px-2 py-1 rounded">
              Sale
            </div>}
        </div>
        <div className="p-4">
          <div className="text-xs uppercase tracking-wider text-[#4a6b60] font-medium mb-1">
            {brand}
          </div>
          <h3 className="font-serif text-lg mb-2 group-hover:text-[#4a6b60] transition-colors line-clamp-2">
            {title}
          </h3>
          <div className="flex items-center mb-3">
            <div className="flex items-center">
              {[...Array(5)].map((_, i) => <Star key={i} size={14} className={`${i < Math.round(rating) ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
            </div>
            <span className="text-xs text-gray-500 ml-2">({reviewCount})</span>
          </div>
          <div className="flex items-center">
            <span className="font-medium">${price.toFixed(2)}</span>
            {originalPrice && <span className="text-sm line-through ml-2 text-gray-500">
                ${originalPrice.toFixed(2)}
              </span>}
          </div>
        </div>
      </Link>
    </div>;
}